<template>
    <div>
        <div class="">
            <el-form ref="ruleFormRef" :model="formData" :rules="formRules" label-width="110px" class="w-[500px]">
                <el-form-item label="启用流量控制" prop="opt" required>
                    <el-select v-model="formData.opt" class="select-c" clearable placeholder="请选择"
                        style=" width: 120px;">
                        <el-option label="关闭" value="stop" />
                        <el-option label="开启" value="update" />
                    </el-select>
                </el-form-item>
                <div class="" v-if="formData.opt === 'update'">
                    <el-form-item label="并发限制" prop="connPerServer" required>
                        <el-input-number v-model="formData.connPerServer" :min="0" controls-position="right"
                            placeholder="请输入" size="small" />
                        <span style="margin-left:6px;">*限制当前站点最大并发数</span>
                    </el-form-item>
                    <el-form-item label="单IP限制" prop="connPerIp" required>
                        <el-input-number v-model="formData.connPerIp" :min="0" controls-position="right"
                            placeholder="请输入" size="small" />
                        <span style="margin-left:6px;">*限制单个IP访问最大并发数</span>
                    </el-form-item>
                    <el-form-item label="流量限制" prop="rateSomeK" required>
                        <el-input-number v-model="formData.rateSomeK" :min="0" controls-position="right"
                            placeholder="请输入" size="small" />
                        <span style="margin-left:6px;">*限制每个请求的流量上限（单位：KB）</span>
                    </el-form-item>
                </div>
            </el-form>
            <div class="" style="padding-left:180px;">
                <el-button type="primary" size="small" :loading="loading"
                    @click="saveHandle(ruleFormRef)">保存</el-button>
            </div>
        </div>
    </div>
</template>
<script setup lang='ts'>
import { ref, computed, watch, reactive, onMounted } from 'vue'
import { propTypes } from '@/utils/propTypes'
import { flowControlPhpWebAPI } from "@/api/systemMonitor/site"

import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'


const emit = defineEmits(['confirm'])
const props = defineProps({
    info: propTypes.object.def(undefined),
    webInfo: propTypes.object.def(undefined)
})
//默认表单
const defaultFormData = {
    opt: "",
    connPerServer: "", //并发限制
    connPerIp: "", //单IP限制
    rateSomeK: '', //流量限制
}
const formData = reactive({
    ...defaultFormData
})
const checked = ref(false)
const ruleFormRef = ref<FormInstance>()
const formRules = reactive<FormRules>({
    opt: [
        { required: true, message: '此项必填', trigger: 'blur' },
    ],
    connPerServer: [
        { required: true, message: '此项必填', trigger: 'blur' },
    ],
    connPerIp: [
        { required: true, message: '此项必填', trigger: 'blur' },
    ],
    rateSomeK: [
        { required: true, message: '此项必填', trigger: 'blur' },
    ],
})

const loading = ref(false)

watch(() => props.webInfo, (newVal) => {
    if (props.webInfo) {
        for (const key in formData) {
            if (Object.prototype.hasOwnProperty.call(formData, key)) {
                if (props.webInfo[key] !== undefined) {
                    formData[key] = props.webInfo[key];
                }

            }
        }

    }
})

//提交
const saveHandle = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            loading.value = true;
            let data;
            if (formData.opt === 'update') {
                data = {
                    ...formData,
                    domainName: props.info.domainName
                }
            } else {
                data = {
                    opt: formData.opt,
                    domainName: props.info.domainName
                }
            }
            flowControlPhpWebAPI(data).then(() => {
                ElMessage.success("操作成功")
                emit('confirm')
            }).finally(() => {
                loading.value = false;
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>